<template>
  <!--博客表单-->
  <a-form ref="formHeaderRef" :model="formState" :wrapper-col="wrapperCol">
    <a-form-item label="标题" name="title">
      <a-input v-model:value="formState.title" placeholder="请输入博客标题" />
    </a-form-item>
    <a-form-item label="编辑器" name="editType">
      <a-radio-group v-model:value="formState.editType">
        <a-radio :value="1">富文本</a-radio>
        <a-radio :value="2">MarkDown</a-radio>
      </a-radio-group>
    </a-form-item>
  </a-form>
  <!--  编辑器选项-->
  <template v-if="formState['editType'] === 1">
    <WangEditor v-model:content="formState.content" class="editor"></WangEditor>
  </template>
  <template v-else>
    <MarkDown v-model:content="formState.content" class="markdown"></MarkDown>
  </template>
  <!--  博客发布按钮-->
  <div class="subBlog">
    <a-button style="margin: 0 15px">重置</a-button>
    <a-button style="width: 160px" type="primary" @click="submitBlog"
      >发布
    </a-button>
  </div>

  <Modal ref="ModelRef" title="博客发布">
    <a-form
      ref="ModelFormRef"
      :model="blogState"
      :rules="rules"
      style="padding: 15px 15px 0 15px"
    >
      <a-form-item label="博客分类" name="sort">
        <a-select
          v-model:value="blogState.sort"
          placeholder="请选择你的博客分类"
        >
          <a-select-option v-for="item of sortList" :value="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="博客类型" name="type">
        <a-radio-group v-model:value="blogState.type">
          <a-radio :value="1">原创</a-radio>
          <a-radio :value="2">转载</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="博客封面" name="cover">
        <Upload v-model:FileList="blogState.cover"></Upload>
      </a-form-item>
      <a-form-item label="博客摘要" name="summary">
        <a-textarea v-model:value="blogState.summary" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24, offset: 16 }">
        <a-button @click="resetModelForm">重置</a-button>
        <a-button style="margin-left: 15px" type="primary" @click="onSubmit"
          >发布
        </a-button>
      </a-form-item>
    </a-form>
  </Modal>
</template>

<script setup>
import WangEditor from "@/components/WangEditor/index.vue";
import MarkDown from "@/components/MarkDown/index.vue";
import Modal from "@/components/Modal/index.vue";
import Upload from "@/components/Upload/index.vue";
import { reactive, ref, toRaw } from "vue";
import { message } from "ant-design-vue";
import { sortAll } from "@/api/sort.js";
import { addBlog } from "@/api/blog.js";
import { userStore } from "@/store/modules/user.js";

const user = userStore();
const ModelRef = ref();
const uploadRef = ref();
const ModelFormRef = ref();
const formHeaderRef = ref();
const formState = reactive({
  title: "",
  editType: 1,
  content: "",
});
const blogState = reactive({
  sort: "",
  cover: "",
  type: "",
  summary: "",
});

// 表单配置项
const wrapperCol = {
  span: 8,
};

const rules = {
  sort: [
    {
      required: true,
      message: "请选择一个分类",
      trigger: "change",
    },
  ],
  summary: [
    {
      required: true,
      message: "博客摘要不能为空",
      trigger: "change",
    },
  ],
  type: [
    {
      required: true,
      message: "博客类型不能为空",
      trigger: "change",
    },
  ],
};
// 分类数据
const sortList = ref([]);

// 获取所有分类
const get_sortAll = async () => {
  let res = await sortAll();
  if (!res) return;
  sortList.value = res.data;
};

// 发布博客
const onSubmit = () => {
  ModelFormRef.value
    .validate()
    .then(async () => {
      const blog = {
        ...toRaw(formState),
        ...toRaw(blogState),
        user: user.user_id,
      };
      let res = await addBlog(blog);
      resetModelForm();
      if (res.status === 200) message.success(res.data);
      else message.error(res.data);
      ModelRef.value?.ToggleModal();
    })
    .catch((error) => {
      console.log("error", error);
    });
};

// 重置表单
const resetModelForm = () => {
  ModelFormRef.value.resetFields();
  formHeaderRef.value.resetFields();
  formState["content"] = "";
};

// 打开弹窗
const submitBlog = async () => {
  if (ModelRef.value) {
    await new Promise((resolve) => {
      ModelRef.value.ToggleModal();
      resolve();
    }).then(() => {
      if (uploadRef.value) uploadRef.value.fileList = [];
    });
  }
};

get_sortAll();
</script>

<style lang="scss" scoped>
.editor {
  height: calc(100vh - 350px) !important;
}

.markdown {
  height: calc(100vh - 270px) !important;
}

.subBlog {
  position: absolute;
  bottom: 5px;
  right: 20px;
  display: flex;
  align-items: start;
  justify-content: end;
}
</style>
